// pages/video/video.js
import request from '../../utils/request'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoGroupList:[], //导航标签数据
    navId:'', //导航标签的id标识
    videoList:[], //视频列表数据
    videoId:'', //video标识
    videoUpdateTime:[], //记录实时播放的时长
    isTriggered:false, //用来表示下拉刷新是否被触发
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getVideoGroupList()
  },

  // 获取导航标签数据的功能函数
  async getVideoGroupList(){
    let result=await request('/video/group/list')
    // 更新videoGroupList的数据
    // slice splice(会影响原数组)
    this.setData({
      videoGroupList:result.data.slice(0,14),
      navId:result.data[0].id
    })
    this.getVideoList(this.data.navId)
  },

  // 获取视频列表数据的功能函数
  async getVideoList(navId){
    let videoListData=await request('/video/group',{id:navId})
    // console.log(videoListData)
    // 更新videoList状态数据
    let index=0
    // 若videoListData.data有值，使用map方法加工这个数组，给item添加一个唯一的id用于标识当前的item，注意加工完的item需要返回
    if (videoListData.datas) {
      let videoList=videoListData.datas.map(item=>{
        item.id=index++
        return item
      })
      // 关闭消息提示框
      wx.hideLoading()
      this.setData({
        videoList,
        isTriggered:false
      })
    }
  },
  // 点击导航切换的回调
  changeNav(event){
    let navId=event.currentTarget.id
    this.setData({
      navId:Number(navId),
      // 切换页面的时候上一个页面的数据先清空，美化页面效果
      videoList:[]
    })
    // 显示正在加载
    wx.showLoading({
      title:'正在加载'
    })
    // 获取最新的视频列表数据
    this.getVideoList(this.data.navId)
  },

  // 点击播放或者继续播放的回调
  handlePlay(event){
    /* 
      当播放新的视频的时候，需要关掉之前的视频
      思路：
        1）找到关闭视频的方法 wx.createVideoContext(string id, Object this)
        2）必须找到上一个视频的实例对象，然后关闭
        
      设计模式：单例模式
        1）需要创建多个对象的情况下，使用一个变量来保存，始终只有一个对象
        2）当创建新的对象的时候，把之前的对象覆盖掉
        3）节省内存空间
        --
    */
    let vid=event.currentTarget.id
    // 关闭上一次视频（解决多个视频同时播放的问题）
    // this.videoContext && this.vid!==vid && this.videoContext.stop() //性能优化以后解决了多个视频同时播放的问题，因为只有一个视频，其他的都是图片
    // this.vid=vid
    // 将当前点击的vid更新至data中的videoId中
    this.setData({
      videoId:vid,
    })
    //  创建视频的上下文对象
    this.videoContext=wx.createVideoContext(vid)

    // 判断当前视频是否有播放时间记录
    let {videoUpdateTime}=this.data
    let videoItem=videoUpdateTime.find(item=>item.vid===vid)
    if (videoItem) {
      // 跳转至指定位置播放
      this.videoContext.seek(videoItem.currentTime)
    }
    // 播放当前视频
    this.videoContext.play()
  },

  // 视频播放进度实时变化的回调
  handleTimeUpdate(event){
    // 1.整理数据
    let videoTimeObj={vid:event.currentTarget.id,currentTime:event.detail.currentTime}
    // 2.添加播放记录到videoUpdateTime
    /* 
      思路：判断videoUpdateTime中是否已经有当前视频的播放记录
      1.如果有：修改播放时长为当前时长
      2.如果没有：将当前视频的播放时长记录添加至videoUpdateTime中
    */
    let {videoUpdateTime}=this.data
    let videoItem=videoUpdateTime.find(item=>item.vid===event.currentTarget.id)
    if (videoItem) {//之前添加过修改时长
      videoItem.currentTime=event.detail.currentTime
    }else{//没有添加过
      videoUpdateTime.push(videoTimeObj)
    }
    // 更新videoUpdateTime的状态
    this.setData({
      videoUpdateTime
    })
  },

  // 监听视频播放结束事件
  handleEnded(event){
    // 将当前视频的播放记录从videoUpdateTime中移除
    let {videoUpdateTime}=this.data
    // videoUpdateTime.splice(开始移除的下标,移除的个数)
    // findIndex是用来寻找指定条件下对应元素第一次出现的位置（索引）
    // videoUpdateTime.findIndex(item=>item.vid===event.currentTime.id)
    videoUpdateTime.splice(videoUpdateTime.findIndex(item=>item.vid===event.currentTime.id),1)
    // 更新移除播放完后视频数组
    this.setData({
      videoUpdateTime
    })
  },

  // 下拉刷新回调
  handleRefresher(event){
    // 发送请求获取最新的视频数据
    this.getVideoList(this.data.navId)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage({from}) {
    if (from==='menu') {
      return {
        title:'来自页面的转发',
        page:'/pages/video/video',
        imageUrl:'/static/images/nvsheng.jpg'
      }
    }else{
      return {
        title:'来自按钮的转发',
        page:'/pages/video/video',
        imageUrl:'/static/images/nvsheng.jpg'
      }
    }
  }
})
